<template>
    <a-card title="菜单配置" :bordered="false">

        <template slot="extra">
            <a-button icon="delete" @click="removeMenu()">删除菜单按钮</a-button>
        </template>
        <a-form-model ref="ruleForm" :model="menuData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

            <a-form-model-item label="菜单名称" prop="name" ref="name">
                <a-input v-model="menuData.name" @blur=" () => { $refs.name.onFieldBlur(); } "
                         :maxLength="maxStr"/>
            </a-form-model-item>


            <a-form-model-item label="菜单类型" prop="type" ref="type" v-if="!hasChild">
                <a-select placeholder="请选择菜单类型" allowClear showSearch v-model="menuData.type" @change="onChangeType">
                    <a-select-option v-for="(item, index) in WxmpMenuTypeOPT" :key="index" :value="item.value">
                        {{item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="关键字设置" help="当用户点击当前按钮时,系统会自动回复选中的关键字设置的回复内容" prop="content" ref="content"
                               v-if="menuData.type==='click'  && !hasChild">
                <ReplyText :dataSource="dataSource" @callBack="(obj)=>{this.menuData.content=JSON.stringify(obj)}"/>
            </a-form-model-item>


            <a-form-model-item label="跳转网址" help="选择一个对应的自动回复关键字作为菜单回复" prop="content" ref="content"
                               v-if="menuData.type==='view'  && !hasChild">
                <JumpUrl :dataSource="dataSource"

                         @callBack="(obj)=>{  this.menuData.content=JSON.stringify(obj)}"/>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 20, offset: 4 }" prop="content" ref="content"
                               v-if="menuData.type==='miniprogram' && !hasChild ">
                <OpenMiniApp :dataSource="dataSource"
                             @callBack="(obj)=>{this.menuData.content=JSON.stringify(obj)}"/>
            </a-form-model-item>


        </a-form-model>


    </a-card>
</template>

<script>
    import {dictLoad} from '../../../../../util/internal.api';


    export default {
        props: ['menuList', 'editId'],
        components: {
            ReplyText: () => import('./form/ReplyText'), //回复关键字
            JumpUrl: () => import('./form/JumpUrl'),     //跳转网址
            OpenMiniApp: () => import('./form/OpenMiniApp'), //打开小程序
        },


        data() {
            return {


                labelCol: {span: 4},
                wrapperCol: {span: 18},

                rules: {
                    name: [{
                        required: true,
                        message: '请设置菜单名称',
                        trigger: 'blur'
                    },
                        {
                            max: this.maxStr,
                            message: '顶级菜单只允许4个字符 子菜单最多只允许4个字符',
                            trigger: 'blur'
                        },
                    ],


                    type: {
                        required: true,
                        message: '请选择菜单类型',
                        trigger: 'blur'
                    },

                    content: {
                        required: true,
                        message: '请设置菜单正文',
                        trigger: 'blur'
                    },


                },
                WxmpMenuTypeOPT: [],
            };
        },
        methods: {
            //修改菜单类型
            onChangeType() {
                let i = this.menuList.findIndex(item => item.id === this.editId);
                this.menuList[i].content = null;

            },


            async init() {
                await dictLoad('WxmpMenuType').then(res => this.WxmpMenuTypeOPT = res);
            },
            //提交表单
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        console.log(valid);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //删除表单
            removeMenu() {
                let _this = this;
                this.$confirm({
                    title: '确定要删除这个菜单吗？',
                    content: '如果删除的是顶级菜单 其所对应的子菜单也将会被删除',
                    onOk() {
                        _this.$emit("onRemove", {editId: _this.editId})
                    },

                });


            },


        },
        created() {
            this.init();
        },
        computed: {
            menuData() {
                let id = this.editId;
                if (id) {
                    return this.menuList.find(item => item.id === id);
                } else {
                    return {};
                }

            },
            //当前菜单是否是顶级菜单
            maxStr() {
                return this.menuData.pid === 0 ? 4 : 7;
            },

            //当前菜单是否拥有子菜单
            hasChild() {
                let id = this.editId;
                let b = this.menuList.findIndex(item => item.pid === id);
                return b >= 0;
            },


            dataSource() {
                if (this.menuData.content === null) {
                    return {};
                } else {
                    //将字符串转换为JSON
                    return JSON.parse(this.menuData.content);
                }
            }


        }

    }
</script>

<style scoped>

</style>
